<template>
  <div class="_system">
    <div v-loading="loading" class="banner-config content">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="标题" required>
          <el-input v-model="form.title" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="内容类型" style="margin-top:20px;">
          <el-select v-model="form.bannerType">
            <el-option label="h5链接" :value="1"></el-option>
            <el-option label="视频" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图" required style="margin-top:20px;">
          <el-upload v-loading="imgUploading" class="avatar-uploader" action="/api/blade-resource/oss/endpoint/put-file" :show-file-list="false" :before-upload="beforeImgUpload" :on-success="imageSuccess" accept="image/*">
            <img v-if="form.imgUrl" :src="form.imgUrl" class="preview">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="form.bannerType === 2" label="视频文件" required style="margin-top:20px;">
          <el-upload v-loading="videoUploading" class="avatar-uploader video-upload" action="/api/blade-resource/oss/endpoint/put-file" :show-file-list="false" :before-upload="beforeVideoUpload" :on-success="videoSuccess" accept="video/*">
            <img v-if="form.imgUrl && videoUploaded" :src="form.imgUrl" class="preview">
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="URL地址" required style="margin-top:20px;">
          <el-input v-model="form.turnUrl"></el-input>
        </el-form-item>
        <el-form-item label="生效时间" required style="margin-top:20px;">
          <el-date-picker v-model="takeTime" type="datetimerange" start-placeholder="生效时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="上架状态" required style="margin-top:20px;">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button type="primary" @click="submit" style="margin:10px 0 0 30px;">提交</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/util/date';

export default {
  name: 'BannerEdit',
  data () {
    return {
      // form: {
      //   title: '',
      //   bannerType: 1,
      //   status: 1,
      //   videoUrl: '',
      //   imgUrl: '',
      //   turnUrl: '',
      //   takeTime: '',
      //   failureTime: '',
      // },
      takeTime: [],
      imgUploading: false,
      videoUploading: false,
      videoUploaded: false,
      loading: false,
    };
  },
  props: {
    form: {
      type: Object
    },
    id: {
      type: Number
    },
    value: {
      type: Boolean,
    },
  },
  created () {
    this.takeTime = [dateFormat(new Date(this.form.takeTime)), dateFormat(new Date(this.form.failureTime))];
  },
  computed: {
    isHide: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    // async getData (id) {
    //   const { code, data } = await this.$API.bannerDetail({ id });
    //   if (code === 200) {
    //     this.form = {
    //       title: data.title,
    //       bannerType: data.bannerType,
    //       status: data.status,
    //       videoUrl: data.videoUrl,
    //       imgUrl: data.imgUrl,
    //       turnUrl: data.turnUrl,
    //       takeTime: data.takeTime,
    //       failureTime: data.failureTime,
    //     };
    //     this.takeTime = [dateFormat(new Date(data.takeTime)), dateFormat(new Date(data.failureTime))];
    //   }
    // },
    beforeImgUpload () {
      this.imgUploading = true;
    },
    beforeVideoUpload () {
      this.videoUploaded = false;
      this.videoUploading = true;
    },
    imageSuccess ({ code, data }) {
      this.imgUploading = false;
      if (code === 200) {
        this.form.imgUrl = data.link;
      }
    },
    videoSuccess ({ code, data }) {
      this.videoUploaded = true;
      this.videoUploading = false;
      if (code === 200) {
        this.form.videoUrl = data.link;
      }
    },
    submit () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.form.takeTime = this.takeTime[0];
          this.form.failureTime = this.takeTime[1];

          const api = this.id ? 'bannerUpdate' : 'bannerAdd';
          console.log(api)
          const { code } = await this.$API[api](this.id ? {
            id: this.id,
            ...this.form,
          } : this.form);

          if (code === 200) {
            this.$message.success('发布成功!');
            this.isHide = false
            this.$emit('success')
            // this.$router.go(-1);
          }
        }
      });
    },
  }
};
</script>

<style lang="less">
._system {
  margin: -20px 0 0 -20px;
}
.banner-config {
  padding-top: 20px;
  .el-form-item__content {
    max-width: 220px;
  }
}
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 180px;
    line-height: 180px;
    text-align: center;
  }
  .preview {
    min-width: 160px;
    height: 180px;
    display: block;
  }
}
.video-upload {
  display: block;
  .el-icon-plus {
    min-width: 180px;
  }
}
</style>
